
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>黑名单页面</title>
    <link href="css/styles.css" th:href="@{/css/styles.css}" rel="stylesheet"/>
    <link href="css/dataTables.bootstrap4.min.css" th:href="@{/css/dataTables.bootstrap4.min.css}" rel="stylesheet" crossorigin="anonymous">
    <script src="js/all.min.js" th:src="@{/js/all.min.js}" crossorigin="anonymous"></script>
</head>
<body class="sb-nav-fixed">
<!--公共部分-->
<div th:replace="commons/bar::topbar"></div>
<div id="layoutSidenav">
    <div id="layoutSidenav_nav">
        <div th:replace="commons/bar::sidebar"></div>
    </div>

    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid">
                <h1 class="mt-4">黑名单</h1>
                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a th:href="@{/user22}">主页</a></li>
                    <li class="breadcrumb-item active">黑名单</li>
                </ol>
                <div class="card mb-4">
                    <div class="card-header"><i class="fas fa-user" aria-hidden="true"></i>黑名单管理</div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>用户ID</th>
                                    <th>冻结时间</th>
                                    <th>原因</th>
                                    <th>状态</th>
                                    <th style="width: 17%">操作</th>
                                </tr>
                                </thead>
                                <tbody id="black_table">
                                </tbody>
                            </table>
                            <!-- 分页条 -->
                            <div class="row">
                                <!-- 分页文字信息 -->
                                <div class="col-md-6" id="page_info_area">
                                    <!-- <h4>当前页第*页,总页码：,总记录：</h4> -->
                                </div>
                                <!-- 分页条信息 -->
                                <div class="col-md-6" id="page_nav_area"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer class="py-4 bg-light mt-auto">
            <div class="container-fluid">
                <div class="d-flex align-items-center justify-content-between small">
                    <div class="text-muted">Copyright &copy; Your Website 2020</div>
                    <div>
                        <a href="#">联系：m15952086301@163.com</a>
                    </div>
                </div>
            </div>
        </footer>
        <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="ModalLabel">用户信息</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group row">
                                <label for="userName" class="col-sm-3 col-form-label text-danger">用户姓名：</label>
                                <div class="col-sm-7">
                                    <input type="text" readonly class="form-control-plaintext text-muted" id="userName">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="userAge" class="col-sm-3 col-form-label text-danger">用户年龄：</label>
                                <div class="col-sm-7">
                                    <input type="text" readonly class="form-control-plaintext text-muted" id="userAge">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="userGender" class="col-sm-3 col-form-label text-danger">用户性别：</label>
                                <div class="col-sm-7">
                                    <input type="text" readonly class="form-control-plaintext text-muted" id="userGender">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="userTel" class="col-sm-3 col-form-label text-danger">用户手机号：</label>
                                <div class="col-sm-7">
                                    <input type="text" readonly class="form-control-plaintext text-muted" id="userTel">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="js/jquery-3.4.1.min.js" th:src="@{/js/jquery-3.4.1.min.js}" crossorigin="anonymous"></script>
<script src="js/bootstrap.bundle.min.js" th:src="@{/js/bootstrap.bundle.min.js}" crossorigin="anonymous"></script>
<script src="js/scripts.js" th:src="@{/js/scripts.js}"></script>
<script src="js/jquery.dataTables.min.js" th:src="@{/js/jquery.dataTables.min.js}" crossorigin="anonymous"></script>
<script src="js/dataTables.bootstrap4.min.js" th:src="@{/js/dataTables.bootstrap4.min.js}" crossorigin="anonymous"></script>
<script type="text/javascript">
    var totalRecord;
    var currentPage;
    $(function() {
        to_page(1);
    })
    function to_page(pn) {
        $.ajax({
            url:"/getBlacklist",
            type:"GET",
            data:"pn="+pn,
            success:function(result){
                bulid_cp_table(result);
                //显示分页信息
                build_page_info(result);
                //解析并显示分页信息
                build_page_nav(result);
            }
        });
    }
    //显示校验的提示信息
    function show_validate_msg(ele,status,msg){
        //清楚当前元素的校验状态
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("span").text();
        if("success"==status){
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg);
        }else if("error"==status){
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg);
        }
    }
    //表格数据
    function bulid_cp_table(result){
        //清空table表格数据
        $("#black_table").empty();
        var bl = result.extend.pageInfo.list;
        $.each(bl,function(index,item){
            var blidTd=$("<td></td>").append(item.blackid);
            var useridTd=$("<td></td>").append(item.userid);
            var startdateTd=$("<td></td>").append(new Date(item.begintime).format("yyyy-MM-dd hh:mm:ss"));
            var enddateTd=$("<td></td>").append(item.cause);
            var statusTd = $("<td></td>").append(item.status);
            var jcBtn=$("<button></button>").addClass("btn btn-primary btn-sm jc_btn")
                .append($("<span></span>").append("解除"));
            var djBtn=$("<button></button>").addClass("btn btn-danger btn-sm dj_btn")
                .append($("<span></span>").append("冻结"));
            var userBtn=$("<button></button>").addClass("btn btn-info btn-sm user_btn")
                .append($("<span></span>").append("用户信息"));
            var btnTd=$("<td></td>").append(jcBtn).append(" ").append(djBtn).append(" ").append(userBtn);
            userBtn.attr("user_id",item.userid);
            jcBtn.attr("black_id",item.blackid);
            djBtn.attr("black_id",item.blackid);
            //append方法执行完成以后还是返回原来的元素
            $("<tr></tr>")
                .append(blidTd)
                .append(useridTd)
                .append(startdateTd)
                .append(enddateTd)
                .append(statusTd)
                .append(btnTd)
                .appendTo("#black_table");
        });
    }

    //日期格式
    Date.prototype.format = function(fmt) {
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "h+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    }
    /**************************分页信息********************************************************/
    //解析显示分页信息
    function build_page_info(result) {
        $("#page_info_area").empty();
        var page_area = result.extend.pageInfo;
        $("#page_info_area").append($("<h5></h5>").append("当前页："+page_area.pageNum+",总页数："+page_area.pages+",总记录数："+page_area.total));
        totalRecord = page_area.total;
        currentPage = page_area.pageNum;
    }
    //解析分页条数据，点击分页要能到下一页
    function build_page_nav(result){
        $("#page_nav_area").empty();
        var ul=$("<ul></ul>").addClass("pagination");
        var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").addClass("page-link").attr("href","#"));
        var prePageLi=$("<li></li>").append($("<a></a>").addClass("page-link").append("&laquo;"));
        //如果不存在上一页，首页和上一页按钮禁用，如果存在上一页，可以进行点击事件（不会发请求）
        if(result.extend.pageInfo.hasPreviousPage==false){
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }else{
            //点击事件
            firstPageLi.click(function(){
                to_page(1);
            });
            prePageLi.click(function(){
                to_page(result.extend.pageInfo.pageNum-1);
            });
        }
        var nextPageLi=$("<li></li>").append($("<a></a>").addClass("page-link").append("&raquo;"));
        var lastPageLi=$("<li></li>").append($("<a></a>").addClass("page-link").append("末页").attr("href","#"));
        if(result.extend.pageInfo.hasNextPage==false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            //点击事件
            nextPageLi.click(function(){
                to_page(result.extend.pageInfo.pageNum+1);
            });
            lastPageLi.click(function(){
                to_page(result.extend.pageInfo.pages);
            });
        }
        ul.append(firstPageLi).append(prePageLi);
        //遍历给UL中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
            var numLi=$("<li></li>").append($("<a></a>").addClass("page-link").append(item));
            if(result.extend.pageInfo.pageNum==item){
                numLi.addClass("text-primary");
            }
            numLi.click(function(){
                to_page(item);
            });
            ul.append(numLi);

        });
        ul.append(nextPageLi).append(lastPageLi);
        var navEle=$("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }
    /***************************************分页信息*****************************************************/

    /*点击解除按钮，将状态置为冻结*/
    $(document).on("click",".dj_btn",function(){
        var blackId = $(this).attr("black_id");
        $.ajax({
            url:"/updateStatusDC/",
            type:"PUT",
            data:{blackid:blackId},
            success:function(result){
                to_page(currentPage);
            }
        });
    })
    /*点击解除按钮，将状态置为已解除*/
    $(document).on("click",".jc_btn",function(){
        var blackId = $(this).attr("black_id");
        $.ajax({
            url:"/updateStatusJC/",
            type:"PUT",
            data:{blackid:blackId},
            success:function (result) {
                to_page(currentPage);
            }
        });
    })
    //点击用户信息按钮，弹出模态框
    $(document).on("click",".user_btn",function(){
        var userid = $(this).attr("user_id");
        getUser(userid);
        //弹出模块矿，静态、esc关闭
        $('#userModal').modal({
            keyboard:true,
            backdrop:"static"
        })
    })
    function getUser(userid){
        $.ajax({
            url:"/queryUserByID/"+userid,
            type:"GET",
            success:function(result){
                var user = result.extend.users;

                $('#userName').val(user.username);
                $('#userAge').val(user.userage);
                $('#userTel').val(user.usertel);
                $("#userGender").val(user.usergender=='M'?'男':'女');
            }
        });
    }
</script>
</body>
</html>
